<?php $base = "http://" . $_SERVER['SERVER_NAME']; ?>

<!-- main -->
<div class="main">


    <script>
        var cityObj = eval('( <?= $this->allCity ?> )');
        var stateObj = eval('( <?= $this->allStates ?> )');
        var brandStateObj = eval('(<?= $this->brandsWithStateId ?>)');

        $(function() {




            ////defaults        
            $("select[name='state']").append("<option value='0'>Please Select</option>");
            $("select[name='city']").append("<option value='0'>Please Select</option>");
            enaDisableAddressOptions(true);
            $("input[name='zip']").prop('disabled', true);


            //enable options
            $("input[name='searchOption1']").click(function() {
                var selectedVal = $(this).val();
                switch (selectedVal) {
                    case "state":
                        enaDisableAddressOptions(false);
                        $("input[name='zip']").prop('disabled', true);
                        break;
                    case "zip":
                        enaDisableAddressOptions(true);
                        $("input[name='zip']").prop('disabled', false);
                        break;
                }
            });

            // Block non-numeric chars.
            $(document).on('keypress', 'input[name=zip]', function(event) {
                return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
            });

            //on select load state for brand
            $("select[name='state']").mousedown(function() {
                var brandVal = $("select[name='brand']").val();
                loadStateByBrandId(brandVal);
            });

            //submit
            $("input[name='submit']").click(function() {
                var verified = true;
                var selectedRadioVal = $('input[name=searchOption1]:checked', '#myForm').val();
                if (selectedRadioVal == undefined) {
                    alert("You must select either search by Address or postcode option.");
                    return false;
                }
                switch (selectedRadioVal) {
                    case "state":
                        if ($("select[name='state']").val() == 0) {
                            alert("You must select State..!!!");
                            verified = false;
                        } else {
                            if ($("select[name='city']").val() == 0) {
                                alert("You must select City..!!!");
                                verified = false;
                            }
                        }
                        break;
                    case "zip":
                        var zipCodeLength = $("input[name='zip']").val().length;
                        if (zipCodeLength == 0) {
                            alert("You must enter postcode.");
                            verified = false;
                        } else if (zipCodeLength !== 6) {
                            alert("Post code must be of 6 digits.");
                            verified = false;
                        }
                        break;
                }
                if (verified && $("select[name='brand']").val() == 0) {
                    alert("You must select brand");
                    verified = false;
                }

                return verified;
            });


            //load city
            $("select[name='state']").change(function() {
                var id = $(this).find("option:selected").attr('value');
                $("select[name='city']").empty();
                $("select[name='city']").append("<option value=''>Select City</option>");
                for (var i1 = 0; i1 < cityObj.length; i1++) {  //city              
                    if (cityObj[i1].state_id === id) {
                        $("select[name='city']").append("<option value=" + cityObj[i1].id + ">" + cityObj[i1].name + "</option>");
                    }
                }
            });

            $("select[name='brand']").change(function() {
                $("select[name='state']").empty();
                $("select[name='city']").empty();
                $("select[name='state']").append("<option value='0'>Please Select</option>");
                $("select[name='city']").append("<option value='0'>Please Select</option>");
            });

        });


        /**
         * 
         * @param {type} storeId
         * @returns {undefined}
         */
        function setStoreInNoty(storeId) {
            $("#myModal1 .modal-body").html("<iframe id='modal1Iframe' src='<?= $base ?>/send/message/" + storeId + "' style='width: 100%; border: 0; overflow-y: hidden; height: 340px;'></iframe>");
            //$("#myModal1 #modal1Iframe").contents().find("input[name='storeId']").val(storeId);
        }


        /**
         * 
         * @param {type} option
         * @returns {undefined}
         */
        function enaDisableAddressOptions(option) {
            $("select[name='state']").prop('disabled', option);
            $("select[name='city']").prop('disabled', option);
        }

        /**
         * 
         * @param {type} brandId
         * @returns {undefined}
         */
        function loadStateByBrandId(brandId) {
            $("select[name='state']").empty();
            $("select[name='state']").append("<option value='0'>Please Select</option>");
            var stateId = 0;
            for (var i = 0; i < brandStateObj.length; i++) {
                if (brandId == brandStateObj[i].brand_id) {
                    stateId = brandStateObj[i].state_id;
                    loadStateByStateId(stateId);
                }
            }
        }

        /**
         * 
         * @param {type} stateId
         * @returns {undefined}
         */
        function loadStateByStateId(stateId) {
            for (var i = 0; i < stateObj.length; i++) { //state
                if (stateObj[i]['id'] == stateId) {
                    $("select[name='state']").append("<option value=" + stateObj[i].id + ">" + stateObj[i].name + "</option>");
                }
            }
        }


        /**
         * 
         * @param {type} title
         * @param {type} mapLink
         * @returns {undefined}
         */
        function loadMap(title, mapLink) {
            $("#myModalLabel").text("Location");
            $("#myModal .modal-body").html("");
            var link = "";
            if (mapLink.match("http")) {
                link = "<iframe width='565' height='350' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='" + mapLink + "'></iframe><br />";
            } else {
                link = "<h3>Google Map Location not specified.</h3>";
            }
            $("#myModalLabel").text(title + "\'s location on Google Map");
            $("#myModal .modal-body").html(link);
        }
    </script>
    <style>
        input[type=radio], input.radio { float:left; clear:none; }

    </style>
    <div id="view-content">
        <div class="row-fluid">        
            <div class="span12 well">
                <!--<div class="span1"></div>-->
                <form id="myForm" method="post">                
                    <div class="span4 well" style="min-height: 206px;">
                        Choose your Brand<br>
                        <select class="span12" name="brand" required="required">
                            <option value="0">Select Brand</option>
                            <?php foreach ($this->allBrands as $brandValue) { ?>
                                <option value="<?= $brandValue['id'] ?>"><?= $brandValue['name'] ?></option> 
                            <?php }
                            ?>
                        </select>                    
                    </div>   
                    <div class="span4 well">
                        <fieldset>
                            <legend> <label class="radio"> <input type="radio" value="state" name="searchOption1"/> Search By Address</label> </legend>
                            Select a state
                            <select class="span12" name="state"></select><br>
                            Select a city
                            <select class="span12" name="city"></select>
                        </fieldset>
                    </div>                           
                    <div class="span4 well" style="min-height: 206px;">
                        <fieldset>
                            <legend> <label class="radio"> <input type="radio" value="zip" name="searchOption1"/> Search By postcode</label> </legend>
                            Enter your postcode<br>
                            <input type="text" name="zip" class="span12" />
                        </fieldset>
                    </div>
                    <input  type="submit" name="submit" value="Search" class="btn btn-info btn-large" />
                </form>
            </div>
            <?php
            if (!$this->resultAvail) {
                ?> 
                <div class="alert alert-danger">
                    Sorry we could not find a store for your searched criteria.
                </div> 
                <?php
            }

            #show selected form   

            if ($this->isSearched) {
                #mark radio selected 
                ?>
                <script>
                    $(function() {
                        $("select[name='brand']").val(<?= $this->searchFormValues['brand'] ?>);
                        $("input[name='searchOption1']").filter('[value=<?= $this->searchFormValues['searchOption1'] ?>]').click();
                    });
                </script>
                <?php if ($this->searchFormValues['searchOption1'] == "state") { ?>
                    <script>
                        $(function() {
                            loadStateByBrandId(<?= $this->searchFormValues['brand'] ?>);
                            $("select[name='state']").val(<?= $this->searchFormValues['state'] ?>);
                            $("select[name='city']").empty();
                            $("select[name='city']").append("<option value=''>Select City</option>");
                            for (var i2 = 0; i2 < cityObj.length; i2++) {  //city              
                                if (cityObj[i2].state_id == <?= $this->searchFormValues['state'] ?>) {
                                    $("select[name='city']").append("<option value=" + cityObj[i2].id + ">" + cityObj[i2].name + "</option>");
                                }
                            }
                            $("select[name='city']").val(<?= $this->searchFormValues['city'] ?>);
                        });
                    </script>
                <?php } else { ?>
                    <script>
                        $("input[name='zip']").val(<?= $this->searchFormValues['zip'] ?>);
                    </script>
                <?php }
                ?>


                <?php
            }#end of isSearched
            #show output

            if ($this->searchedArrayResult != null) {
                ?>
                Your selected brand: <img src="http://<?= $_SERVER['SERVER_NAME'] ?>/uploads/brands/<?= $this->brandImage ?>" style="max-width: 100px; max-height: 100px;" />
                <div class="searched-output">
                    <table class="table">                
                        <?php
                        $index = 1;
                        foreach ($this->searchedArrayResult as $store) :
                            ?>
                            <tr class="well">
                                <td><h1><?= $index ?></h1></td>
                                <td>
                                    <div class="span4">
                                        <address>
                                            <b><?= $store['store_name'] ?></b>
                                            <?= $store['address1'] ?> <?= $store['address2'] ?><br>                                        
                                            <?= $store['location']['city']['name'] ?>,
                                            <?= $store['location']['state']['name'] ?>,
                                            PIN <?= $store['location']['zipcode']['code'] ?>                                        
                                        </address>
                                    </div>
                                    <div class="span4">
                                        <b>Email: </b> <?= $store['email'] ?><br>
                                        <b>Contact: </b> <?= $store['contact1'] ?>, <?= $store['contact2'] ?><br><br>                                    
                                    </div>
                                    <div class="span4">                                    
                                        <a id="loadmap" onclick="loadMap('<?= $store['store_name'] ?>', '<?= $store['map'] ?>');" class="btn btn-info" title="View location on map" href="#myModal" role="button" data-toggle="modal"><i class="icon-white icon-map-marker"></i> View Location on Map</a><br><br>                                    
                                        <!--<a class="btn" href="<?= $this->url(array('id' => $store['store_id']), 'send-msg'); ?>"><i class="icon-share-alt"></i> Send details to your mail/sms</a>-->
                                        <a class="btn btn-info" href="#myModal1" onclick="setStoreInNoty(<?= $store['store_id'] ?>)" role="button" data-toggle="modal"><i class="icon-white icon-share-alt"></i> Send details to your mail/sms</a>
                                    </div>
                                </td>
                            </tr>
                            <?php
                            $index++;
                        endforeach;
                        ?>
                    </table>
                </div>
                <?php
            }
            ?>
        </div>
    </div>
    <div id="myModal" class="modal hide fade" style="width: 600px;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Location</h3>
        </div>
        <div class="modal-body"></div>
    </div>


    <div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="min-height: 60%;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Send Store Details to your Email/Mobile</h3>
        </div>
        <div class="modal-body">        
        </div>    
    </div>    


    <section class="cols">      
        <div class="col">
            <fb:like-box href="https://www.facebook.com/savantemp" width="292" show_faces="true" header="true" stream="false" show_border="true"></fb:like-box>
        </div>
        <div class="cl">&nbsp;</div>
    </section>
</div>